<template>
    <!-- ytq 查看 优惠券领取详情-->
    <div class="addProduct">
        <div class="breadcrumb">
            <Breadcrumb :aaa='aaa' :msgg="msg" :txt="txt" :path1="path1" />
        </div>

        <div class="form-container">
            <!-- 1 -->
            <div data-v-43ec4916="" class="table-layout">
                <div data-v-43ec4916="" class="el-row">
                    <div data-v-43ec4916="" class="table-cell-title el-col el-col-4">名称</div>
                    <div data-v-43ec4916="" class="table-cell-title el-col el-col-4">优惠券类型</div>
                    <div data-v-43ec4916="" class="table-cell-title el-col el-col-4">可使用商品</div>
                    <div data-v-43ec4916="" class="table-cell-title el-col el-col-4">使用门槛</div>
                    <div data-v-43ec4916="" class="table-cell-title el-col el-col-4">面值</div>
                    <div data-v-43ec4916="" class="table-cell-title el-col el-col-4">状态</div>
                </div>
                <div data-v-43ec4916="" class="el-row" v-for="item in couponDetailArr" :key="item.id">
                    <div data-v-43ec4916="" class="table-cell el-col el-col-4">{{ item.name }}</div>
                    <div data-v-43ec4916="" class="table-cell el-col el-col-4">
                        <span v-if="item.type === 0">全场赠券</span>
                        <span v-if="item.type === 1">会员赠券</span>
                        <span v-if="item.type === 2">购物赠券</span>
                        <span v-if="item.type === 3">注册赠券</span>
                    </div>
                    <div data-v-43ec4916="" class="table-cell el-col el-col-4">
                        <span v-if="item.useType === 0">全场通用</span>
                        <span v-if="item.useType === 1">指定分类</span>
                        <span v-if="item.useType === 2">指定商品</span>
                    </div>
                    <div data-v-43ec4916="" class="table-cell el-col el-col-4">满{{ item.note }}可用</div>
                    <div data-v-43ec4916="" class="table-cell el-col el-col-4">{{ item.amount }}元</div>
                    <div data-v-43ec4916="" class="table-cell el-col el-col-4">
                        <span v-if="item.endTime > curDate1">未过期</span>
                        <span v-else>已过期</span>
                    </div>
                </div>
                <div data-v-43ec4916="" class="el-row">
                    <div data-v-43ec4916="" class="table-cell-title el-col el-col-4">有效期</div>
                    <div data-v-43ec4916="" class="table-cell-title el-col el-col-4">总发行量</div>
                    <div data-v-43ec4916="" class="table-cell-title el-col el-col-4">已领取</div>
                    <div data-v-43ec4916="" class="table-cell-title el-col el-col-4">待领取</div>
                    <div data-v-43ec4916="" class="table-cell-title el-col el-col-4">已使用</div>
                    <div data-v-43ec4916="" class="table-cell-title el-col el-col-4">未使用</div>
                </div>
                <div data-v-43ec4916="" class="el-row" v-for="item in couponDetailArr" :key="item.id">
                    <div data-v-43ec4916="" class="table-cell el-col el-col-4" style="font-size: 13px;">

                        {{
                            item.startTime
                            ? dayjs(item.startTime).format("YYYY-MM-DD HH:mm:ss")
                            : ""
                        }}至
                        {{
                            item.endTime
                            ? dayjs(item.endTime).format("YYYY-MM-DD HH:mm:ss")
                            : ""
                        }}
                    </div>
                    <div data-v-43ec4916="" class="table-cell el-col el-col-4">{{ item.publishCount }}</div>
                    <div data-v-43ec4916="" class="table-cell el-col el-col-4">{{ item.receiveCount }}</div>
                    <div data-v-43ec4916="" class="table-cell el-col el-col-4">{{ item.count }}</div>
                    <div data-v-43ec4916="" class="table-cell el-col el-col-4">{{ item.receiveCount }}</div>
                    <div data-v-43ec4916="" class="table-cell el-col el-col-4">{{ item.publishCount }}</div>
                </div>
            </div>

            <!-- 2 -->
            <div class="search_container">
                <el-card>
                    <div class="search_top">
                        <span> <i></i> <span> 筛选搜索</span> </span>
                        <span>
                            <el-button @click="onClear">重置</el-button>
                            <el-button type="primary" @click="onSearch">查询搜索</el-button>
                        </span>
                    </div>
                    <el-form label-width="140px" class="f">
                        <!-- 1 -->
                        <el-form-item label="使用状态：">
                            <el-select v-model="useStatus" placeholder="全部">
                                <el-option label="未使用" value="0" />
                                <el-option label="已使用" value="1" />
                                <el-option label="已过期" value="2" />
                            </el-select>
                        </el-form-item>
                        <!-- 2 -->
                        <el-form-item label="订单编号：">
                            <el-input class="orderID" type="text" placeholder="订单编号" v-model="orderID"></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <!-- 3 -->
            <!-- 数据的展示 -->
            <el-table class="two" :data="tableData" style="width: 100%" :border="true">
                <el-table-column prop="" label="优惠码" width="100" />
                <el-table-column prop="" label="领取会员" width="150">
                </el-table-column>
                <el-table-column prop="" label="领取方式" width="100" />
                <el-table-column prop="" label="领取时间" width="150" />
                <el-table-column :prop="useStatus" label="当前状态" width="120" />
                <el-table-column prop="" label="使用时间" width="100" />
                <el-table-column :prop="orderID" label="订单编号">
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination class="pagination" v-model:current-page="pagination.pageNum"
                v-model:page-size="pagination.pageSize" background :page-sizes="[5, 10, 15]"
                layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import {
    ref,
    reactive,
    watch,
    onBeforeUnmount,
    shallowRef,
    onMounted,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import useTable from "../../hooks/useTables";
import * as api from "../../request/api";
import { useRoute } from 'vue-router';
import { formalDate } from '../../util'
import dayjs from "dayjs";
import Breadcrumb from '../../components/breadcrumb.vue'
let msg = ref('优惠券领取详情')
let txt = ref('营销')
let path1 = ref('sms/flash')
let aaa = ref(0)

// const useStatus = ref(""); //使用状态
const orderID = ref(""); //订单编号

//重置
let onClear = () => {
    useStatus.value = "";
    orderID.value = "";
};
//跳转
const route = useRoute()
let id = route.query.id
let couponDetailArr = reactive([])
let onOwn = async () => {
    let detailData = await api.coupon.couponDetail({ id })
    couponDetailArr.push(detailData)
}
onOwn()
// console.log(couponDetailArr)
//领取记录下面表格
let couponId = ref();
let orderSn = ref()
let useStatus = ref();
let pageNum = ref(1);
let pageSize = ref(10);
let {
    tableData,
    getTableData,
    pagination,
    handleSizeChange,
    handleCurrentChange,
} = useTable(api.coupon.couponHistory, {
    // orderSn: orderSn.value,
    // useStatus: useStatus.value,
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    couponId: id,
});
getTableData()
//查询搜索 和上面冲突??
// let {
//     tableData,
//     getTableData,
//     pagination,
//     handleSizeChange,
//     handleCurrentChange,
// } = useTable(api.coupon.couponList, {
//     name, type//useStatus，orderID
// });
// let onSearch = async () => {
//     // console.log(id.value);
//     getTableData();
// };
//是否已过期 获取当前时间
let curDate = new Date()
let curDate1 = formalDate(curDate)
</script>

<style lang="scss" scoped>
:deep .el-table thead {
    font-weight: bold !important;
}



.pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}

:deep .el-table td.el-table__cell,
:deep .el-table th.el-table__cell.is-leaf {
    border-bottom: var(--el-table-border);
    text-align: center !important;
}



.el-input,
.textarea {
    width: 340px;
}

.orderID {
    width: 240px;
}

.send {
    margin-left: 23px;
}

.form-container {
    left: 0;
    right: 0;
    width: 720px;
    padding: 27px 35px 15px 35px;
    margin: 20px auto;
    width: 70%;
}

.addProduct {
    background-color: white;
    height: 100vh;
}

.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}

.f {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 20px;
}

.el-input-group {
    width: 40%;
}

.breadcrumb {
    height: 45px;
    border-bottom: 1px solid #ebeef5;
    font-size: 20px;
}

.el-card.is-always-shadow {
    box-shadow: none;
}

.search_container {
    left: 0;
    right: 0;
    padding: 27px 35px 15px 0;
    width: 100%;
}

.search_top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.el-card__body {
    padding: 50px 30px !important;
}

.el-card {
    border-radius: 4px;
    border: 1px solid#ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
}

.one {
    :deep .el-table .el-table__cell {
        color: #303133 !important;
        background: #f2f6fc;
        font-weight: 500 !important;
        text-align: center !important;
    }

    :deep .el-table__row:nth-of-type(3n) {
        background: #fff !important;

    }


}

.table-layout[data-v-43ec4916] {
    margin-top: 20px;
    border-left: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;
}

.el-row {
    position: relative;
    box-sizing: border-box;
}

.el-row:after,
.el-row:before {
    display: table;
    content: "";
}

.table-cell-title[data-v-43ec4916] {
    background: #f2f6fc;
    color: #303133;
}

.table-cell-title[data-v-43ec4916],
.table-cell[data-v-43ec4916] {
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    padding: 10px;
    font-size: 14px;
    text-align: center;
}

.el-col-4 {
    width: 16.66667%;
}

[class*=el-col-] {
    float: left;
    box-sizing: border-box;
}

.table-cell[data-v-43ec4916] {
    height: 60px;
    line-height: 40px;
    color: #606266;
    overflow: hidden;
}
</style>
